<template >
    <div>
        <h1 class="mb-4 text-center text-danger">任务列表案例</h1>
        <div class="row align-items-center">
            <!-- 全选 -->
            <div class="col-auto">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="allCheck" v-model="checked"/>
                    <label class="form-check-label" for="allCheck"> 全选 </label>
                </div>
            </div>

            <!-- 输入待办 -->
            <div class="col">
                <input @keyup.enter="inputValue" v-model="text" class="form-control" type="text" placeholder="请输入待办事项，按回车添加" aria-label="todo input" />
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props:['allChecked'],
    data() {
        return {
            // 子组件本身维护自己添加的数据
            text:'',
        }
    },
    computed:{
        // 将数据交给计算属性维护
        checked: {
            get() {
                // 使用get函数监听prop数据
                return this.allChecked
            },
            set(value) {
                // 当计算属性修改时，触发$emit通知父组件修改prop数据
                this.$emit("updateHeaderChecked", value)
            }
        }
    },
    methods: {
        inputValue() {
            // 使用事件监听text数据的变化，并通知父组件维护子组件数据
            this.$emit("updateHeaderInput", this.text)
            // 使用事件监听可以再次重置text数据（二次变化）
            this.text = ''
        }
    },
}
</script>
<style>
    
</style>